<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>增强版多媒体预览测试</title>
    <!-- 引入ElementPlus样式 -->
    <link rel="stylesheet" href="./css/ElementPlus/index.css"/>
    <!-- 引入 Vue 3 -->
    <script src="./js/vue3/index.js"></script>
    <!-- 引入ElementPlus js代码 -->
    <script src="./js/elementplus/index.js"></script>
    <script src="./js/elementplus/icons.js"></script>
    <!-- 引入多媒体预览组件 -->
    <script src="./js/multiPreview.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./css/multiPreview.css"/>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #f5f5f5;
        }
        .test-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        .file-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .file-item {
            text-align: center;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            background: white;
        }
        .file-item:hover {
            background: #f0f0f0;
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        .file-item img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 6px;
            margin-bottom: 10px;
        }
        .file-name {
            font-size: 14px;
            word-break: break-all;
            line-height: 1.3;
            margin-bottom: 5px;
        }
        .file-type {
            font-size: 12px;
            color: #666;
            background: #f0f0f0;
            padding: 2px 8px;
            border-radius: 10px;
            display: inline-block;
        }
        .test-info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            border-left: 4px solid #2196f3;
        }
        .test-info h3 {
            margin: 0 0 10px 0;
            color: #1976d2;
        }
        .test-info ul {
            margin: 0;
            padding-left: 20px;
        }
        .test-info li {
            margin-bottom: 5px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="test-container">
        <h1>🎬 增强版多媒体预览功能测试</h1>
        
        <div class="test-info">
            <h3>✨ 新增功能测试</h3>
            <ul>
                <li><strong>图片缩放</strong>：点击图片后，使用缩放按钮或鼠标滚轮进行缩放</li>
                <li><strong>视频播放</strong>：点击视频文件，支持原生HTML5播放器</li>
                <li><strong>音频播放</strong>：点击音乐文件，显示时长和播放控制</li>
                <li><strong>错误处理</strong>：文件加载失败时显示友好提示</li>
                <li><strong>键盘控制</strong>：ESC关闭，左右方向键切换文件</li>
            </ul>
        </div>
        
        <div class="file-grid">
            <div 
                v-for="(file, index) in testFiles" 
                :key="index"
                class="file-item"
                @click="openPreview(index)"
            >
                <img :src="getFileIcon(file)" :alt="file.file_name" />
                <div class="file-name">{{ file.file_name }}</div>
                <div class="file-type">{{ getFileTypeName(file.type) }}</div>
            </div>
        </div>
    </div>
    
    <!-- 多媒体预览组件 -->
    <multi-media-preview 
        :visible="previewVisible" 
        :files="testFiles" 
        :current-index="previewIndex"
        @update:visible="previewVisible = $event"
        @update:current-index="previewIndex = $event"
    ></multi-media-preview>
</div>

<script>
const { createApp, ref } = Vue;

const App = {
    setup() {
        const previewVisible = ref(false);
        const previewIndex = ref(0);
        
        // 测试文件数据
        const testFiles = ref([
            {
                id: 1,
                file_name: "美丽风景.jpg",
                type: 1,
                cover: "https://picsum.photos/800/600?random=1"
            },
            {
                id: 2,
                file_name: "城市夜景.png",
                type: 1,
                cover: "https://picsum.photos/800/600?random=2"
            },
            {
                id: 3,
                file_name: "自然风光.jpg",
                type: 1,
                cover: "https://picsum.photos/800/600?random=3"
            },
            {
                id: 4,
                file_name: "测试视频.mp4",
                type: 7,
                // 使用一个可用的测试视频URL
                cover: "https://www.w3schools.com/html/mov_bbb.mp4"
            },
            {
                id: 5,
                file_name: "背景音乐.mp3",
                type: 6,
                // 使用一个可用的测试音频URL
                cover: "https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"
            },
            {
                id: 6,
                file_name: "轻音乐.mp3",
                type: 6,
                // 另一个测试音频
                cover: "https://file-examples.com/wp-content/uploads/2017/11/file_example_MP3_700KB.mp3"
            },
            {
                id: 7,
                file_name: "文档文件.pdf",
                type: 5,
                cover: "./resource/img/pdf.png"
            },
            {
                id: 8,
                file_name: "演示视频.mp4",
                type: 7,
                cover: "https://sample-videos.com/zip/10/mp4/SampleVideo_1280x720_1mb.mp4"
            }
        ]);
        
        const openPreview = (index) => {
            previewIndex.value = index;
            previewVisible.value = true;
        };
        
        const getFileIcon = (file) => {
            if (file.type === 1) {
                return file.cover;
            }
            
            const icons = {
                2: "./resource/img/txt.png",
                5: "./resource/img/pdf.png",
                6: "./resource/img/mp3.png", 
                7: "./resource/img/video.png"
            };
            return icons[file.type] || "./resource/img/blank.png";
        };
        
        const getFileTypeName = (type) => {
            const typeNames = {
                1: '图片',
                2: '文本',
                5: 'PDF',
                6: '音频',
                7: '视频'
            };
            return typeNames[type] || '未知';
        };
        
        return {
            previewVisible,
            previewIndex,
            testFiles,
            openPreview,
            getFileIcon,
            getFileTypeName
        };
    }
};

const app = createApp(App);

// 注册ElementPlus图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component);
}

// 注册多媒体预览组件
if (window.MultiMediaPreview) {
    app.component('MultiMediaPreview', window.MultiMediaPreview);
    console.log('MultiMediaPreview registered successfully');
} else {
    console.error('MultiMediaPreview component not found');
}

app.use(ElementPlus);
app.mount('#app');
</script>
</body>
</html>